<!--
 * @Date: 2023-12-13 16:35:12
 * @LastEditTime: 2024-03-05 15:53:42
 * @Description: content
-->
<template>
  <view class="content">
    <uni-nav-bar
      left-icon="left"
      :title="'集市'"
      color="#fff"
      backgroundColor="transparent"
      :border="false"
      :statusBar="true"
      :fixed="true"
      @clickLeft="$c.back"
    ></uni-nav-bar>

    <view class="tab">
      <view
        class="tab-item"
        v-for="(item, i) in tabList"
        :key="i"
        :class="{
          act: tabCur == i
        }"
        @click="tabChange(i)"
      >
        <text>{{ item.title }}</text>
      </view>

      <view class="my-bag" @click="$c.to({ url: '/package/mine/market-bag' })">
        荷包
      </view>
    </view>

    <mescroll-body
      ref="mescrollRef"
      @init="mescrollInit"
      @down="downCallback"
      @up="getList"
      :down="downOption"
      :up="upOption"
    >
      <view class="list">
        <view class="list-item" v-for="(item, i) in listData" :key="i">
          <view class="list-item-hd">
            <view class="avatar">
              <image :src="item.headimg" lazy-load></image>
            </view>

            <view class="info">
              <view class="name-num">
                <view class="name hang1">
                  {{ item.nickname }}
                </view>

                <view class="num">共{{ item.orderlist_total }}件</view>
              </view>

              <view class="time">{{ item.addtime }}</view>
            </view>

            <view class="type-price">
              <view class="type">一口价</view>

              <view class="price">¥{{ item.price }}</view>
            </view>
          </view>

          <scroll-view class="list-item-bd" scroll-x>
            <view class="prize-list">
              <view
                class="prize-item"
                v-for="(a, b) in item.orderlist"
                :key="b"
              >
                <view class="pic">
                  <image :src="a.goodslist_imgurl" lazy-load></image>

                  <view class="num">×{{ a.prize_num }}</view>
                </view>

                <view class="title hang1">
                  {{ a.goodslist_title }}
                </view>
              </view>
            </view>
          </scroll-view>

          <view class="list-item-ft">
            <view class="num">挂售单号:{{ item.order_num }}</view>

            <view class="copy icon" @click="$c.copy(item.order_num)">
              <image :src="$img('/static/img/4_fz.png')" lazy-load></image>
            </view>

            <view class="total">
              <!-- 共233件 -->
            </view>

            <view
              v-if="tabList[tabCur].id == 1"
              class="buy"
              @click="confirmBuy(item)"
            >
              立即购买
            </view>

            <view v-if="tabList[tabCur].id == 2" class="suc icon">
              <image :src="$img('/static/img/4_ytj.png')" lazy-load></image>
            </view>

            <view
              v-if="tabList[tabCur].id == 3"
              class="buy"
              @click="$c.noDouble(cancelSale, item)"
            >
              撤回
            </view>
          </view>
        </view>
      </view>
    </mescroll-body>

    <uni-popup ref="buyPop" type="bottom">
      <view v-if="orderData" class="buy-pop">
        <view class="buy-pop-hd">
          确认订单

          <view class="close icon" @click="$refs.buyPop.close()">
            <image :src="$img('/static/img/close2.png')" lazy-load></image>
          </view>
        </view>

        <view class="buy-card">
          <scroll-view class="list-wrap" scroll-x>
            <view class="prize-list">
              <view
                class="prize-item"
                v-for="(a, b) in orderData.orderlist"
                :key="b"
              >
                <view class="pic">
                  <image :src="a.goodslist_imgurl" lazy-load></image>

                  <view class="num">×{{ a.prize_num }}</view>
                </view>

                <view class="title hang1">
                  {{ a.goodslist_title }}
                </view>
              </view>
            </view>
          </scroll-view>
        </view>

        <view class="pay-title">请选择抵扣方式</view>

        <view class="pay-type" @click="toggleUse('use_money_is')">
          <view class="icon">
            <image :src="$img('/static/img/pay_type1.png')" lazy-load></image>
          </view>

          <view class="title">
            使用荷包金额抵扣¥
            {{ orderData.use_money }} (剩余:¥{{ orderData.money }})
          </view>

          <view class="icon">
            <image
              v-if="use_money_is"
              :src="$img('/static/img/check_act.png')"
              lazy-load
            ></image>

            <image
              v-else
              :src="$img('/static/img/check.png')"
              lazy-load
            ></image>
          </view>
        </view>

        <view class="agree" @click="isAgree = !isAgree">
          <view class="icon">
            <image
              v-if="isAgree"
              :src="$img('/static/img/check_act.png')"
              lazy-load
            ></image>

            <image
              v-else
              :src="$img('/static/img/check.png')"
              lazy-load
            ></image>
          </view>

          我已满18岁,阅读并同意

          <text @click.stop="$c.to({ url: '/pages/guize/guize?type=4' })">
            《用户协议》
          </text>

          <text @click.stop="$c.to({ url: '/pages/guize/guize?type=5' })">
            《隐私政策》
          </text>
        </view>

        <view class="rule">
          <scroll-view class="rule-inner" scroll-y>
            <view v-html="sendRuleData"></view>
          </scroll-view>
        </view>

        <view class="pay-btn" @click="$c.noDouble(submitBuy)">
          确认支付¥{{ orderData.price }}
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 下拉刷新的配置(可选, 绝大部分情况无需配置)
      downOption: {
        auto: false
      },
      // 上拉加载的配置(可选, 绝大部分情况无需配置)
      upOption: {
        auto: true,
        page: {
          size: 15 // 每页数据的数量,默认10
        }
      },

      use_money_is: true,
      curItem: '',

      listData: [],
      tabList: [
        {
          id: 1,
          title: '集市'
        },
        // {
        //   id: 2,
        //   title: '成交墙'
        // },
        {
          id: 3,
          title: '我发布的'
        }
      ],
      tabCur: 0,
      orderData: '',
      isAgree: true,
      sendRuleData: ''
    }
  },

  onLoad(options) {
    this.$c.getRule(10).then(res => {
      if (res.status == 1) {
        this.sendRuleData = res.data
      }
    })
  },

  methods: {
    /* 撤回发布 */
    cancelSale(item) {
      this.req({
        url: 'market_che_hui',
        data: {
          id: item.id
        },
        success: res => {
          if (res.status == 1) {
            this.$c.toast({
              title: res.msg,
              duration: 500,
              success: () => {
                this.mescroll.resetUpScroll()
                this.mescroll.scrollTo(0, 0)
              }
            })
          }
        }
      })
    },

    toggleUse(e) {
      this[e] = !this[e]

      this.confirmBuy(this.curItem)
    },

    submitBuy() {
      this.req({
        url: 'market_pay',
        data: {
          id: this.curItem.id,
          use_money_is: this.use_money_is ? 1 : 0
          // ad_id: uni.getStorageSync('_ad_id')
        },
        success: async res => {
          if (res.status == 1) {
            this.$refs.buyPop.close()

            if (res.data.status == 1) {
              const status = await this.$c.wxMpPay({
                data: res.data.res
              })

              if (status == 'success') {
                this.mescroll.resetUpScroll()
                this.mescroll.scrollTo(0, 0)
              }
            } else {
              this.$c.toast({
                title: res.msg,
                duration: 500,
                success: () => {
                  this.mescroll.resetUpScroll()
                  this.mescroll.scrollTo(0, 0)
                }
              })
            }
          }
        }
      })
    },

    confirmBuy(item) {
      this.curItem = item

      this.req({
        url: 'market_money',
        data: {
          id: this.curItem.id,
          use_money_is: this.use_money_is ? 1 : 0
        },
        success: res => {
          if (res.status == 1) {
            this.orderData = res.data

            this.$refs.buyPop.open()
          }
        }
      })
    },

    tabChange(i) {
      this.tabCur = i
      this.listData = []

      this.mescroll.resetUpScroll()
      this.mescroll.scrollTo(0, 0)
    },

    /**
     * @description: 获取列表
     * @param {*} num
     * @param {*} size
     * @return {*}
     */
    getList({ num, size }) {
      let url = 'market_list'

      // if (this.tabList[this.tabCur].id == 2) {
      //   url = 'my_market_list'
      // }

      this.req({
        url,
        data: {
          page: num,
          type: this.tabList[this.tabCur].id
        },

        success: res => {
          if (res.status == 1) {
            if (num == 1) {
              this.listData = []
            }

            this.listData = this.listData.concat(res.data.list)
            this.mescroll.endByPage(res.data.list.length, res.data.last_page)
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
.content {
  box-sizing: border-box;
  padding: 0 0 30rpx;

  image {
    width: 100%;
    height: 100%;
    border-radius: inherit;
  }

  .icon {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .tab {
    display: flex;
    align-items: center;
    padding: 10rpx 30rpx;
    position: relative;

    .tab-item {
      position: relative;
      margin-right: 50rpx;

      font-size: 28rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #999999;

      &.act {
        font-size: 32rpx;
        color: transparent;

        background: linear-gradient(
          90deg,
          #6adeff 0%,
          #7ab5ff 50%,
          #ff7feb 100%
        );
        background-clip: text;

        &::before {
          content: '';
          display: block;
          position: absolute;
          width: 32rpx;
          height: 4rpx;
          background: linear-gradient(90deg, #2dcbff 0%, #ff95fb 100%);
          border-radius: 2rpx;
          left: 50%;
          bottom: -8rpx;
          transform: translateX(-50%);
        }
      }
    }

    .my-bag {
      position: absolute;
      right: 30rpx;
      top: 50%;
      transform: translateY(-50%);

      font-size: 26rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #999999;
    }
  }

  .list {
    width: 690rpx;
    padding: 1rpx 30rpx 0;

    .list-item {
      padding: 0 30rpx;
      background: rgba(208, 209, 255, 0.1);
      margin-top: 30rpx;

      .list-item-hd {
        padding: 30rpx 0;
        display: flex;
        align-items: center;

        .avatar {
          width: 80rpx;
          height: 80rpx;
          background: #9d9d9d;
          border: 1px solid #cccccc;
          border-radius: 50%;
        }

        .info {
          flex: 1;
          padding: 0 20rpx;

          .name-num {
            display: flex;
            align-items: center;

            .name {
              max-width: 200rpx;

              font-size: 32rpx;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #ffffff;
            }
            .hang1 {
            }

            .num {
              padding-left: 10rpx;

              font-size: 24rpx;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #ffffff;
            }
          }

          .time {
            margin-top: 10rpx;

            font-size: 24rpx;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #cccccc;
          }
        }

        .type-price {
          display: flex;
          flex-flow: column nowrap;
          align-items: flex-end;

          .type {
            font-size: 36rpx;
            font-family: YouSheBiaoTiHei;
            font-weight: 400;
            color: #fefefe;
          }

          .price {
            font-size: 28rpx;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: transparent;

            background: linear-gradient(90deg, #2dcbff 0%, #ff95fb 100%);
            background-clip: text;
          }
        }
      }

      .list-item-bd {
        white-space: nowrap;

        .prize-list {
          display: inline-flex;
          white-space: normal;

          .prize-item {
            width: 170rpx;
            box-sizing: border-box;
            margin-left: 20rpx;

            &:first-child {
              margin-left: 0;
            }

            .pic {
              width: 100%;
              height: 170rpx;
              position: relative;
              border: 1px solid;
              border-image: linear-gradient(90deg, #2dcbff, #ff95fb) 1 1;
              box-sizing: border-box;

              .num {
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%;
                height: 32rpx;
                background: rgba(0, 0, 0, 0.6);
                display: flex;
                justify-content: center;
                align-items: center;

                font-size: 24rpx;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #ffffff;
              }
            }

            .title {
              margin-top: 10rpx;

              font-size: 24rpx;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #dddddd;
            }
            .hang1 {
            }
          }
        }
      }

      .list-item-ft {
        display: flex;
        align-items: center;
        padding: 20rpx 0;
        margin-top: 20rpx;
        border-top: 1rpx solid #666666;

        .num {
          font-size: 24rpx;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #ffffff;
        }

        .copy {
          width: 50rpx;
          height: 26rpx;
          margin-left: 10rpx;
        }

        .total {
          flex: 1;
          text-align: right;
          padding-right: 20rpx;

          font-size: 24rpx;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #ffffff;
        }

        .buy {
          width: 130rpx;
          height: 50rpx;
          background: linear-gradient(90deg, #2dcbff 0%, #ff95fb 100%);
          border-radius: 30rpx;
          display: flex;
          justify-content: center;
          align-items: center;

          font-size: 24rpx;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #222222;
        }

        .suc {
          width: 80rpx;
          height: 80rpx;
        }
        .icon {
        }
      }
    }
  }

  .buy-pop {
    padding: 0 30rpx;
    box-sizing: border-box;
    border-radius: 30rpx 30rpx 0rpx 0rpx;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: linear-gradient(to right, #1d1d25, #1d1d25),
      linear-gradient(90deg, #6adeff, #7ab5ff, #ff7feb);
    box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(176, 128, 255, 0.8);
    padding-bottom: 30rpx;
    position: relative;
    bottom: var(--window-bottom);

    .buy-pop-hd {
      padding: 20rpx 0;
      padding-left: 10rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      font-size: 32rpx;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #ffffff;

      .close {
        width: 60rpx;
        height: 60rpx;
      }
      .icon {
      }
    }

    .buy-card {
      background: #000000;
      border-radius: 20rpx;
      padding: 30rpx 30rpx 10rpx;

      .list-wrap {
        white-space: nowrap;

        .prize-list {
          display: inline-flex;
          white-space: normal;

          .prize-item {
            width: 170rpx;
            box-sizing: border-box;
            margin-left: 20rpx;

            &:first-child {
              margin-left: 0;
            }

            .pic {
              width: 100%;
              height: 170rpx;
              position: relative;
              border: 1px solid;
              border-image: linear-gradient(90deg, #2dcbff, #ff95fb) 1 1;
              box-sizing: border-box;

              .num {
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%;
                height: 32rpx;
                background: rgba(0, 0, 0, 0.6);
                display: flex;
                justify-content: center;
                align-items: center;

                font-size: 24rpx;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #ffffff;
              }
            }

            .title {
              margin-top: 10rpx;

              font-size: 24rpx;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #dddddd;
            }
            .hang1 {
            }
          }
        }
      }

      .line {
        height: 1px;
        background: #222222;
        margin: 30rpx 0 10rpx;
      }

      .card-row {
        padding: 16rpx 0;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .title {
          font-size: 28rpx;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #ffffff;
        }

        .row-r {
          display: flex;
          align-items: center;

          font-size: 24rpx;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #d0d1ff;

          .icon {
            width: 32rpx;
            height: 32rpx;
          }
        }
      }
      .card-row {
        .title {
        }
        .row-r {
          .icon {
          }
        }
      }
    }

    .pay-title {
      margin-top: 30rpx;

      font-size: 28rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;
    }

    .pay-type {
      padding: 30rpx;
      background: #000000;
      border-radius: 20rpx;
      margin-top: 20rpx;
      display: flex;
      align-items: center;

      .icon {
        width: 32rpx;
        height: 32rpx;
      }

      .title {
        flex: 1;
        padding: 0 20rpx;

        font-size: 28rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
        word-wrap: break-word;
        word-break: break-all;
      }
    }

    .agree {
      display: flex;
      margin-top: 30rpx;

      font-size: 24rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;
      line-height: 32rpx;

      .icon {
        width: 32rpx;
        height: 32rpx;
        margin-right: 10rpx;
      }

      text {
        color: #d0d1ff;
      }
    }

    .rule {
      padding: 20rpx;
      background: #000000;
      border-radius: 20rpx;
      box-sizing: border-box;
      margin: 20rpx 0 0;

      .rule-inner {
        max-height: 120rpx;

        font-size: 20rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #dddddd;
      }
    }

    .pay-btn {
      margin-top: 30rpx;
      height: 80rpx;
      background: linear-gradient(90deg, #2dcbff 0%, #ff95fb 100%);
      border-radius: 40rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      font-size: 32rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;
    }
  }
}
</style>
